<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img id="captchaImg" th:src="'data:image/jpeg;base64,' + ${captchaImage}" alt="Mountains" style="width:100px;height:50px;">
<h2 id="captchaText" th:text="${captchaText}"></h2>
<input id="inputCaptcha" th:value="${captchaText}" type="text">
</body>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var captchaImg = document.getElementById("captchaImg");
    var captchaText = document.getElementById("captchaText");
    var inputCaptcha = document.getElementById("inputCaptcha");
    captchaImg.addEventListener("click", function () {
        $.ajax({
            url: "/getCaptcha",
            type: "GET",
            success: function (data) {
                captchaImg.src = "data:image/png;base64," + data.captchaImageBytes;
                captchaText.innerHTML = data.captchaText;
                inputCaptcha.value = data.captchaText;
                console.log('captcha===>', data.captchaText)
            }
        });
    })
</script>
</html>